<template>
    <div class="rectangle-container">
        <ul class="rectangle-list">
            <li v-for="(item, i) in buttonList" :style="{ '--i': buttonList.length - i }">
                <button @click="emitButton(item.eventName, i)">{{ item.buttonName }}</button>
            </li>
        </ul>
    </div>
</template>
  
<script>
export default {
    name: "RectangleButtons",
    props: ["buttons"],
    emits: ["buttonDown"],
    data() {
        return {
            buttonList: [
                {
                    buttonName: "按钮1",
                    eventName: "",
                },
                {
                    buttonName: "按钮2",
                    eventName: "",
                },
                {
                    buttonName: "按钮3",
                    eventName: "",
                },
                {
                    buttonName: "按钮4",
                    eventName: "",
                },
                {
                    buttonName: "按钮5",
                    eventName: "",
                },
                {
                    buttonName: "按钮6",
                    eventName: "",
                },
                {
                    buttonName: "按钮7",
                    eventName: "",
                },
            ],
        }
    },
    computed: {},
    methods: {
        emitButton(param, index) {
            this.$emit("buttonDown", param, index);
        },
    },
    created(){
        if (this.$props.buttons) {
            this.buttonList = this.$props.buttons;
        }
    },
    mounted() {
        
    }
}
</script>
<style scoped>
.rectangle-list {
    position: relative;
    transform: skewY(-15deg);
}

.rectangle-list>li {
    position: relative;
    list-style: none;
    width: 200px;
    height: 40px;
    background: #3e3f46;
    padding: 15px;
    z-index: var(--i);
    transition: 0.5s;
}

.rectangle-list>li::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -40px;
    width: 40px;
    height: 100%;
    background: #2e3133;
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.5s;
}

.rectangle-list>li::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0px;
    width: 100%;
    height: 40px;
    background: #35383e;
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 0.5s;
}

.rectangle-list>li:hover {
    background: #33a3ee;
    transform: translateX(50px);
}

.rectangle-list>li:hover::before {
    background: #1f5378;
}

.rectangle-list>li:hover::after {
    background: #2982b9;
}

.rectangle-list>li:last-child::after {
    box-shadow: -100px 100px 20px rgba(0, 0, 0, 0.25);
}

.rectangle-list>li>button {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.5s;
    font-size: 20px;
}

.rectangle-list>li:hover>button {
    color: #fff;
}
</style>